<template>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <div class="box">
        <div class="box_top">
            <h1>XMT的个人bolg</h1>
            <p>又是一个WordPress站点</p>
        </div>
        <div class="one">
            <h1>世界，您好！</h1>
            <p class="one_p">2016年1月30日</p><p class="two_p">欢迎使用WordPress：这是您的第一篇文章，编辑或删除它，然后开始写作吧！</p><br>
            <p style="color: gray">有一条评论</p>
        </div>
        <div class="two">
            <div>
                <input type="text" placeholder="搜索..."><i class="fas fa-search icon"></i>
            </div>

            <div v-for="item in list" :key="item.id" class="div_bottom">
                <p>{{item.title}}</p>
                <li v-for="(contentItem, index) in item.content" :key="index">{{ contentItem }}</li>
            </div>
        </div>

    </div>
</template>

<style scoped>
    * {
        margin: 0;
    }
    .box {
        width: 1600px;
        height: 100%;
        margin: 0 auto;
    }
    .box_top p{
        color: gray;
        margin-bottom: 5%;
    }
    .one {
        float: left;
        width: 60%;
    }
    
    .one h1 {
        margin-bottom: 5%;
    }

    .one .one_p{
        display: inline-block;
        margin-bottom: 1.5%;
        color: gray;
    }

    .one .two_p{
        display:  inline-block;
        margin-left: 15%;
    }


    .two {
        align-items: center;
        float: right;
        width: 30%;
    }

    .two div {
        margin-left: 10%;
        width: 300px;
        border-top: 2px solid black;
    }
    
    .two li {
        color: #3882ab;
    }
    .two p{
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .two input{
        width: 250px;
        height: 30px;
        margin-top: 5%;
        margin-bottom: 10%;
        outline: none;
    }

    .two i {
        height: 28px;
        width: 28px;
        text-align: center;
        cursor: pointer;
        border-radius: 0 4px 4px 0;
    }

    .two .div_bottom{
        margin-top: 10%;
    }
</style>

<script setup>
   import { reactive } from 'vue';
   const list = reactive([
    {id:1,title:"近期文章",content:["世界，你好！"]},
    {id:2,title:"近期评论",content:["WordPress发表（您好，世界！）"]},
    {id:3,title:"文章归档",content:["2016年一月"]},
    {id:4,title:"分类目录",content:["你好世界"]},
    {id:5,title:"功能",content:["登录","文章","评论","WordPress.org"]}
   ])
</script>   

